<template>
  <div>
    <el-form
      :model="form"
      status-icon
      :rules="rules"
      ref="myform"
      label-width="100px"
      class="myform"
    >
      <el-form-item label="手机号" prop="mobile">
        <el-input type="text" v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" show-password v-model="form.password"></el-input>
      </el-form-item>

      <!-- <el-form-item>
          
      </el-form-item>-->
      <el-form-item>
        <!-- <Slide/> -->
        <el-button type="primary" class="width100" @click="loginToDo">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="请拖动滑块到指定位置" :visible.sync="dialogVisible" width="380px" :center="true">
      <slide-verify
        :l="42"
        :r="10"
        :w="310"
        :h="155"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
        :slider-text="text"
        style="margin:auto"
        ref="slideblock"
      ></slide-verify>
    </el-dialog>
  </div>
</template>


<script>
import { login } from "@/api";
import Slide from "./slide.vue";
export default {
  components: {
    Slide,
  },
  data() {
    return {
      form: {
        mobile: "",
      },
      dialogVisible: false,
        msg: "",
        text: "向右滑",
        // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
        accuracy: 1,
      rules: {
        mobile: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              var mobileReg = /^1(3|5|6|7|8|9)\d{9}$/;
              if (mobileReg.test(value)) {
                callback();
              } else {
                callback(new Error("请输入正确的手机号码"));
              }
            },
            trigger: "change",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              var passReg = /^[A-Za-z0-9]{4,12}$/;
              if (value.length < 4) {
                callback(new Error("密码长度至少4位"));
              } else if (value.length > 12) {
                callback(new Error("密码长度最多12位"));
              } else if (!passReg.test(value)) {
                callback(new Error("密码格式不正确"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    loginToDo() {
      // this.$router.push({name:'Index'})
      this.$refs.myform.validate((valid) => {
        if (valid) {
          login(this.form)
            .then((res) => {
              if (res.type) {
                // console.log(1111);
                sessionStorage.setItem("token", res.token);
                localStorage.setItem("mobile", this.form.mobile);
                sessionStorage.setItem("roleid", res.roleid);
                // this.$router.push({name:'Index'})
                this.dialogVisible = true;
              }
            })
            .catch((err) => {});
        } else {
          this.$message.error("手机号或密码不正确");
          return false;
        }
      });
    },
    onSuccess(times) {
      //  console.log('验证通过，耗时 '+  times + '毫秒');
      // this.msg = 'login success, 耗时${(times / 1000).toFixed(1)}s'
      // console.log();
      this.$message.success("验证通过，耗时 " + times + "毫秒");
      setTimeout(() => {
        this.$router.push({ name: "Index" });
      }, 1000);
    },
    onFail() {
      console.log("验证不通过");
      this.msg = "验证不通过";
    },
    onRefresh() {
      console.log("点击了刷新小图标");
      this.msg = "点击了刷新小图标";
    },
    onFulfilled() {
      console.log("刷新成功啦！");
    },
    onAgain() {
      console.log("检测到非人为操作的哦！");
      this.msg = "try again";
      // 刷新
      this.$refs.slideblock.reset();
    },
    handleClick() {
      // 父组件直接可以调用刷新方法
      this.$refs.slideblock.reset();
    },
  },
  mounted() {
    var mob = localStorage.getItem("mobile");
    this.form.mobile = mob;
  },
};
</script>



<style lang="scss" scoped>
.myform {
  padding-right: 50px;
  padding-top: 20px;
}
.width100 {
  width: 100%;
}
</style>